<template>
  <s-layout title="志愿数据" navbar="normal" :bgStyles="{ color: '#f5f5f5' }">
    <!-- Time Range Selector -->
    <view class="time-selector">
      <view
        v-for="(range, index) in state.timeRanges"
        :key="index"
        :class="['time-item', { active: state.activeRange === index }]"
        @tap="handleRangeChange(index)"
      >
        {{ range }}
      </view>
    </view>

    <!-- Overall Statistics -->
    <view class="overview-section">
      <view class="section-header">
        <text class="header-icon">📊</text>
        <text class="header-title">整体数据概览</text>
      </view>
      <view class="stats-grid">
        <view class="stat-card">
          <text class="stat-value">{{ state.overview.volunteers }}</text>
          <text class="stat-label">注册志愿者</text>
          <text class="stat-unit">人</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">{{ state.overview.teams }}</text>
          <text class="stat-label">志愿团队</text>
          <text class="stat-unit">个</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">{{ state.overview.activities }}</text>
          <text class="stat-label">开展活动</text>
          <text class="stat-unit">场</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">{{ state.overview.hours }}</text>
          <text class="stat-label">服务时长</text>
          <text class="stat-unit">小时</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">{{ state.overview.participants }}</text>
          <text class="stat-label">参与人次</text>
          <text class="stat-unit">人次</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">{{ state.overview.beneficiaries }}</text>
          <text class="stat-label">受益群众</text>
          <text class="stat-unit">人</text>
        </view>
      </view>
    </view>

    <!-- Activity Category Distribution -->
    <view class="chart-section">
      <view class="section-header">
        <text class="header-icon">📈</text>
        <text class="header-title">活动类型分布</text>
      </view>
      <view class="chart-container">
        <view
          v-for="category in state.categories"
          :key="category.name"
          class="category-item"
        >
          <view class="category-info">
            <text class="category-icon">{{ category.icon }}</text>
            <text class="category-name">{{ category.name }}</text>
          </view>
          <view class="category-bar">
            <view class="bar-fill" :style="{ width: category.percent + '%' }"></view>
          </view>
          <view class="category-data">
            <text class="data-value">{{ category.count }}</text>
            <text class="data-percent">{{ category.percent }}%</text>
          </view>
        </view>
      </view>
    </view>

    <!-- Top Volunteers Ranking -->
    <view class="ranking-section">
      <view class="section-header">
        <text class="header-icon">🏆</text>
        <text class="header-title">志愿者排行榜</text>
        <text class="header-subtitle">按服务时长排序</text>
      </view>
      <view class="ranking-list">
        <view
          v-for="(volunteer, index) in state.topVolunteers"
          :key="volunteer.id"
          class="ranking-item"
          @tap="handleVolunteerClick(volunteer)"
        >
          <view :class="['rank-badge', getRankClass(index)]">
            <text v-if="index < 3">{{ getRankIcon(index) }}</text>
            <text v-else>{{ index + 1 }}</text>
          </view>
          <view class="volunteer-avatar">{{ volunteer.avatar }}</view>
          <view class="volunteer-info">
            <text class="volunteer-name">{{ volunteer.name }}</text>
            <text class="volunteer-team">{{ volunteer.team }}</text>
          </view>
          <view class="volunteer-stats">
            <text class="stat-hours">{{ volunteer.hours }}小时</text>
            <text class="stat-activities">{{ volunteer.activities }}场活动</text>
          </view>
        </view>
      </view>
    </view>

    <!-- Top Teams Ranking -->
    <view class="ranking-section">
      <view class="section-header">
        <text class="header-icon">🚩</text>
        <text class="header-title">优秀团队榜</text>
        <text class="header-subtitle">按活动数量排序</text>
      </view>
      <view class="team-ranking-list">
        <view
          v-for="(team, index) in state.topTeams"
          :key="team.id"
          class="team-ranking-item"
          @tap="handleTeamClick(team)"
        >
          <view :class="['rank-badge', getRankClass(index)]">
            <text v-if="index < 3">{{ getRankIcon(index) }}</text>
            <text v-else>{{ index + 1 }}</text>
          </view>
          <view class="team-logo">{{ team.logo }}</view>
          <view class="team-info">
            <text class="team-name">{{ team.name }}</text>
            <view class="team-metrics">
              <text class="metric">👥 {{ team.members }}人</text>
              <text class="metric">📅 {{ team.activities }}场</text>
              <text class="metric">⏱️ {{ team.hours }}小时</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- Monthly Trend -->
    <view class="trend-section">
      <view class="section-header">
        <text class="header-icon">📉</text>
        <text class="header-title">月度趋势</text>
      </view>
      <view class="trend-chart">
        <view class="chart-y-axis">
          <text v-for="i in 5" :key="i" class="y-label">{{ (5 - i) * 50 }}</text>
        </view>
        <view class="chart-bars">
          <view
            v-for="month in state.monthlyData"
            :key="month.month"
            class="month-bar-container"
          >
            <view class="bar-wrapper">
              <view class="month-bar" :style="{ height: month.percent + '%' }">
                <text class="bar-value">{{ month.value }}</text>
              </view>
            </view>
            <text class="month-label">{{ month.month }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- Export Button -->
    <view class="export-section">
      <button class="export-btn" @tap="handleExport">
        <text class="btn-icon">📥</text>
        <text>导出数据报表</text>
      </button>
    </view>
  </s-layout>
</template>

<script setup>
import { reactive } from 'vue'
import sheep from '@/sheep'

const state = reactive({
  activeRange: 0,
  timeRanges: ['本月', '本季度', '本年', '全部'],
  overview: {
    volunteers: '5,230',
    teams: '156',
    activities: '1,248',
    hours: '86,500',
    participants: '23,600',
    beneficiaries: '125,000'
  },
  categories: [
    { name: '志愿服务', icon: '🤝', count: 425, percent: 34 },
    { name: '文化活动', icon: '🎭', count: 312, percent: 25 },
    { name: '环保公益', icon: '🌱', count: 250, percent: 20 },
    { name: '医疗健康', icon: '🏥', count: 137, percent: 11 },
    { name: '教育培训', icon: '📚', count: 124, percent: 10 }
  ],
  topVolunteers: [
    {
      id: 1,
      name: '张小明',
      avatar: '👨',
      team: '海城志愿者协会',
      hours: 856,
      activities: 128
    },
    {
      id: 2,
      name: '李红',
      avatar: '👩',
      team: '文明社区艺术团',
      hours: 742,
      activities: 96
    },
    {
      id: 3,
      name: '王强',
      avatar: '👨',
      team: '爱心医疗服务队',
      hours: 698,
      activities: 85
    },
    {
      id: 4,
      name: '赵丽',
      avatar: '👩',
      team: '阳光助学志愿团',
      hours: 632,
      activities: 78
    },
    {
      id: 5,
      name: '刘建国',
      avatar: '👨',
      team: '科技创新服务团',
      hours: 589,
      activities: 72
    }
  ],
  topTeams: [
    {
      id: 1,
      name: '海城志愿者协会',
      logo: '🤝',
      members: 328,
      activities: 156,
      hours: 5200
    },
    {
      id: 2,
      name: '绿色环保行动队',
      logo: '🌱',
      members: 98,
      activities: 142,
      hours: 3850
    },
    {
      id: 3,
      name: '阳光助学志愿团',
      logo: '📚',
      members: 125,
      activities: 128,
      hours: 3560
    },
    {
      id: 4,
      name: '爱心医疗服务队',
      logo: '🏥',
      members: 52,
      activities: 98,
      hours: 2100
    },
    {
      id: 5,
      name: '文明社区艺术团',
      logo: '🎭',
      members: 85,
      activities: 86,
      hours: 1280
    }
  ],
  monthlyData: [
    { month: '1月', value: 85, percent: 34 },
    { month: '2月', value: 92, percent: 37 },
    { month: '3月', value: 125, percent: 50 },
    { month: '4月', value: 168, percent: 67 },
    { month: '5月', value: 210, percent: 84 },
    { month: '6月', value: 245, percent: 98 }
  ]
})

const handleRangeChange = (index) => {
  state.activeRange = index
  uni.showToast({
    title: `切换到${state.timeRanges[index]}`,
    icon: 'none'
  })
}

const getRankClass = (index) => {
  if (index === 0) return 'rank-first'
  if (index === 1) return 'rank-second'
  if (index === 2) return 'rank-third'
  return ''
}

const getRankIcon = (index) => {
  const icons = ['🥇', '🥈', '🥉']
  return icons[index]
}

const handleVolunteerClick = (volunteer) => {
  sheep.$router.go(`/pages/cmt/volunteer-profile?id=${volunteer.id}`)
}

const handleTeamClick = (team) => {
  sheep.$router.go(`/pages/cmt/team-detail?id=${team.id}`)
}

const handleExport = () => {
  uni.showLoading({
    title: '正在导出...'
  })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '导出成功',
      icon: 'success'
    })
  }, 1500)
}
</script>

<style lang="scss" scoped>
.time-selector {
  background: white;
  margin: 30rpx;
  border-radius: 24rpx;
  padding: 10rpx;
  display: flex;
  gap: 10rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

  .time-item {
    flex: 1;
    text-align: center;
    padding: 16rpx 0;
    border-radius: 16rpx;
    font-size: 26rpx;
    color: #666;
    background: #f5f5f5;
    transition: all 0.3s;

    &.active {
      background: linear-gradient(135deg, #ff6b00, #ffa726);
      color: white;
      font-weight: bold;
    }
  }
}

.overview-section,
.chart-section,
.ranking-section,
.trend-section {
  background: white;
  margin: 0 30rpx 30rpx;
  border-radius: 32rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);

  .section-header {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 30rpx;

    .header-icon {
      font-size: 36rpx;
    }

    .header-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .header-subtitle {
      margin-left: auto;
      font-size: 24rpx;
      color: #999;
    }
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rpx;

  .stat-card {
    text-align: center;
    padding: 24rpx;
    background: linear-gradient(135deg, #fff3e0, #ffecb3);
    border-radius: 20rpx;

    .stat-value {
      display: block;
      font-size: 40rpx;
      font-weight: bold;
      color: #ff6b00;
      margin-bottom: 8rpx;
    }

    .stat-label {
      display: block;
      font-size: 24rpx;
      color: #666;
      margin-bottom: 4rpx;
    }

    .stat-unit {
      font-size: 20rpx;
      color: #999;
    }
  }
}

.chart-container {
  .category-item {
    display: flex;
    align-items: center;
    gap: 20rpx;
    margin-bottom: 24rpx;

    .category-info {
      width: 180rpx;
      display: flex;
      align-items: center;
      gap: 12rpx;

      .category-icon {
        font-size: 32rpx;
      }

      .category-name {
        font-size: 26rpx;
        color: #333;
      }
    }

    .category-bar {
      flex: 1;
      height: 24rpx;
      background: #f0f2f5;
      border-radius: 12rpx;
      overflow: hidden;

      .bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #ff6b00, #ffa726);
        border-radius: 12rpx;
      }
    }

    .category-data {
      width: 140rpx;
      text-align: right;

      .data-value {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-right: 12rpx;
      }

      .data-percent {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.ranking-list {
  .ranking-item {
    display: flex;
    align-items: center;
    gap: 24rpx;
    padding: 24rpx;
    background: #f8f9fa;
    border-radius: 20rpx;
    margin-bottom: 16rpx;
    transition: all 0.3s;

    .rank-badge {
      width: 56rpx;
      height: 56rpx;
      background: #ddd;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: bold;
      color: white;
      flex-shrink: 0;

      &.rank-first {
        background: linear-gradient(135deg, #ffd700, #ffed4e);
      }

      &.rank-second {
        background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
      }

      &.rank-third {
        background: linear-gradient(135deg, #cd7f32, #e6a87a);
      }
    }

    .volunteer-avatar {
      width: 80rpx;
      height: 80rpx;
      background: linear-gradient(135deg, #ff6b00, #ffa726);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40rpx;
      flex-shrink: 0;
    }

    .volunteer-info {
      flex: 1;

      .volunteer-name {
        display: block;
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 8rpx;
      }

      .volunteer-team {
        font-size: 24rpx;
        color: #999;
      }
    }

    .volunteer-stats {
      text-align: right;

      .stat-hours {
        display: block;
        font-size: 32rpx;
        font-weight: bold;
        color: #ff6b00;
        margin-bottom: 4rpx;
      }

      .stat-activities {
        font-size: 22rpx;
        color: #999;
      }
    }
  }
}

.team-ranking-list {
  .team-ranking-item {
    display: flex;
    align-items: center;
    gap: 24rpx;
    padding: 24rpx;
    background: #f8f9fa;
    border-radius: 20rpx;
    margin-bottom: 16rpx;

    .rank-badge {
      width: 56rpx;
      height: 56rpx;
      background: #ddd;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: bold;
      color: white;
      flex-shrink: 0;

      &.rank-first {
        background: linear-gradient(135deg, #ffd700, #ffed4e);
      }

      &.rank-second {
        background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
      }

      &.rank-third {
        background: linear-gradient(135deg, #cd7f32, #e6a87a);
      }
    }

    .team-logo {
      width: 80rpx;
      height: 80rpx;
      background: linear-gradient(135deg, #ff6b00, #ffa726);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40rpx;
      flex-shrink: 0;
    }

    .team-info {
      flex: 1;

      .team-name {
        display: block;
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 12rpx;
      }

      .team-metrics {
        display: flex;
        gap: 20rpx;

        .metric {
          font-size: 22rpx;
          color: #999;
        }
      }
    }
  }
}

.trend-chart {
  display: flex;
  gap: 20rpx;

  .chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20rpx 0;

    .y-label {
      font-size: 20rpx;
      color: #999;
    }
  }

  .chart-bars {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 400rpx;
    border-bottom: 2rpx solid #e0e0e0;

    .month-bar-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      .bar-wrapper {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 0 10rpx;

        .month-bar {
          width: 60rpx;
          background: linear-gradient(to top, #ff6b00, #ffa726);
          border-radius: 8rpx 8rpx 0 0;
          position: relative;
          display: flex;
          align-items: flex-start;
          justify-content: center;
          padding-top: 8rpx;

          .bar-value {
            font-size: 20rpx;
            color: white;
            font-weight: bold;
          }
        }
      }

      .month-label {
        font-size: 22rpx;
        color: #666;
        margin-top: 12rpx;
      }
    }
  }
}

.export-section {
  padding: 20rpx 30rpx 40rpx;

  .export-btn {
    width: 100%;
    background: linear-gradient(135deg, #ff6b00, #ffa726);
    color: white;
    border: none;
    padding: 24rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;

    .btn-icon {
      font-size: 32rpx;
    }
  }
}
</style>
